<template>
  <view class="chat-container">
    <scroll-view class="message-container" scroll-y style="height: 0%">
      <view v-for="(message, index) in messages" :key="index" :class="['message-item', {'received': message.isReceived}, {'sent': !message.isReceived}]">
        <view class="avatar-container" v-if="message.isReceived">
          <image class="avatar" :src="userAvatar" mode="aspectFill"></image>
        </view>
        <view class="message-content">
          <text class="nickname" v-if="message.isReceived">{{ message.nickname }}</text>
          <view class="content">{{ message.content }}</view>
        </view>
       <view class="avatar-container" v-if="!message.isReceived">
         <image class="avatar" :src="friendAvatar" mode="aspectFill"></image>
       </view>

      </view>
    </scroll-view>
    <view class="input-container">
      <input class="input-box" type="text" v-model="inputMessage" placeholder="请输入消息内容" @confirm="sendMessage"></input>
      <button class="send-button" @tap="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
	import axios from "components/axios";
export default {
  data() {
    return {
	  user:[],
      inputMessage: '', // 输入的消息内容
      messages: [], // 消息数组，用于显示聊天记录
      userAvatar: '../../static/logoimg.png', // 用户头像URL
      friendAvatar: '../../static/商城 1-1.png', // 好友头像URL
    };
  },
  mounted() {//本地永久存储
  this.user = uni.getStorageSync('user');
  //this.userName = uni.getStorageSync('user.name');
  console.log('5551',this.user.id)
    const storedMessages = localStorage.getItem("messages");
    if (storedMessages) {
      this.messages = JSON.parse(storedMessages);
    }
  },
methods: {
  sendMessage() {//发送信息
    if (this.inputMessage.trim() === '') {
      return;
    }
console.log('555',this.user.name)
    const message = {
      content: this.inputMessage,
      isReceived: false, // 判断消息是否为接收的，这里默认为发送消息
      nickname: 'w', // 用户昵称
    };

    setTimeout(() => {
		let requestData = {
		nickname: this.user.name,
		content: this.inputMessage
		
		};
		uni.request({
		  url: 'http://43.136.172.73/api/v1/system/FeedBack/addNew/',
		  method: 'POST',
		  data: requestData,
		  header: {
		    'Authorization': 'sfsdf',
		  },
		  success: (res) => {
		    console.log(res.data); // 打印接收到的后端返回的信息
				
		    if (res.data.code === 200) {
		      uni.showToast({
		        title: '发送成功',
		        icon: 'none',
				 duration: 2000
		      });
		    } 
					  
					  if (res.data.code === 2001) {
					    uni.showToast({
					      title: '用户不存在',
					      icon: 'none'
					    });
					  } else {
						  
		   //   this.user = res.data.map.user;
		   //   this.userId = res.data.map.user.id;
		      console.log('打印用户', this.user);		
		  
		    }
		  },
	
		});
		
		
      const reply = {
        content: '后台已收到消息，请等待客服回电，或者请您直接致电客服：123456，谢谢！',
        isReceived: true,
        nickname: '自动回复',
      };
      this.messages.push(reply);
    }, 500);
	    // 将消息添加到消息数组中
	    this.messages.push(message);//以下三行做本地永久存储
	
	    // 清空输入框内容
	    this.inputMessage = "";
	
	    // 将消息数组保存到本地存储
	    localStorage.setItem("messages", JSON.stringify(this.messages));
	  },
	},

};
</script>

<style scoped>
.chat-container {

  display: flex;
  flex-direction: column;
  height: 95vh;

	
}

.message-container {
  flex: 1;
  padding: 10px;
  background-color: #f9f9f9;
}

.message-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.received {
  justify-content: flex-start;
}

.sent {
  justify-content: flex-end;
}

.avatar-container {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 24rpx;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.content {
  background-color: #e8f0fe;
  padding: 8rpx;
  border-radius: 6rpx;
  word-wrap: break-word;
  max-width: 240rpx;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 35rpx;
  border-top: 1rpx solid #ccc;
  background-color: #f3f3f3;
}

.input-box {
  flex: 1;
  height: 90rpx;
  padding: 10rpx;
  border-radius: 30rpx;
  border: none;
  outline: none;
  background-color: #fff;
}

.send-button {
  margin-left: 20rpx;
  padding: 0rpx 20rpx;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 30rpx;
}
</style>

<!--<template>
  <view class="chat-container">
    <scroll-view class="message-container" scroll-y="true">
      <view v-for="(message, index) in messages" :key="index" class="message-item">
        <view v-if="message.isReceived" class="received-message">{{ message.content }}</view>
        <view v-else class="sent-message">{{ message.content }}</view>
      </view>
    </scroll-view>
    <view class="input-container">
      <input class="input-box" type="text" v-model="inputMessage" @confirm="sendMessage" placeholder="请输入消息内容">
      <button class="send-button" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
	import axios from "components/axios";
export default {
  data() {
    return {
      inputMessage: "", // 输入的消息内容
      messages: [] // 消息数组，用于显示聊天记录
    };
  },
  methods: {
    sendMessage() {
      const message = {
        content: this.inputMessage,
        isReceived: false // 判断消息是否为接收的，这里默认为发送消息
      };

      // 调用后端API发送消息给官方客服，这里使用axios发送HTTP请求示例
     //axios.post("/api/send-message", { message: this.inputMessage })
      //  .then(response => {
          // 处理成功响应
          this.messages.push(message); // 将发送的消息添加到消息数组中，以在页面上显示
          this.inputMessage = ""; // 清空输入框内容
        //})
       // .catch(error => {
          // 处理错误响应
         // console.error(error);
       // });
    }
  }
};
</script>

<style>
.chat-container {
  width: 100%;
  height: 90vh;
}

.message-container {
  height: calc(100% - 50px);
  padding: 10px;
}

.message-item {
  margin-bottom: 10px;
}

.received-message {
  background-color: #efefef;
  padding: 10px;
  border-radius: 10px;
}

.sent-message {
  background-color: #d3eefc;
  padding: 10px;
  border-radius: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 10px;
}

.input-box {
  flex: 1;
  height: 45px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.send-button {
  margin-left: 10px;
  padding:0px 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>
-->